counter -
increment
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2 |
|
Значення
за умовчанням |
none |
|
Наслідує |
Ні |
|
Застосовується |
До усіх
елементів |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/generate.html#propdef - counter - increment |
Опис
Стильова
властивість counter - increment призначене для збільшення значення лічильника
приростів, який задається властивістю counter, - reset. Такий лічильник
підраховує кількість відображень елементів на сторінці і може виводитися за
допомогою властивості content і псевдоелементів after і before. Це дозволяє
створювати списки (у тому числі багаторівневі), в яких нумерація і вид
задаються через стилі.
Синтаксис
counter -
increment: none | inherit | ідентифікатор | ціле число
Значення
none Забороняє збільшення лічильника для поточного селектора.
Inherit Наслідує значення батька.
ідентифікатор Задає одну
або декілька змінних, для яких вимагається змінити значення лічильника. Змінні
розділяються між собою пропуском.
ціле число Визначає
значення приросту лічильника. За умовчанням воно дорівнює 1. Допускається
використовувати негативні і нульові значення.
Можливі
поєднання значень властивостей counter - reset і counter - increment показані в
таблиці. 1.
|
Таблиця. 1. Зміна нумерації списку |
|
|
Код |
Результат |
|
LI { list
- style - type: none; }OL { counter - reset: list - 1; }LI: before {counter -
increment: list;content: counter(list) ". ";} |
Список
починається з нуля. 0, 1, 2 |
|
LI { list
- style - type: none; }OL { counter - reset: list; }LI: before {counter -
increment: list 2;content: counter(list) ". ";} |
Виводяться
усі парні числа. 2, 4, 6 |
|
LI { list
- style - type: none; }OL { counter - reset: list - 1; }LI: before {counter -
increment: list list;content: counter(list) ". ";} |
Виводяться
усі непарні числа. 1, 3, 5 |
|
LI { list
- style - type: none; }OL { counter - reset: list 9; }LI: before {counter -
increment: list;content: counter(list) ". ";} |
Список
починається з 10. 10, 11, 12
|
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>counter -
increment</title>
<style type="text/css">
BODY {
counter - reset: heading; /* Ініціюємо лічильник
*/
}
H2: before {
counter - increment: heading; /* Вказуємо
ідентифікатор лічильника */
content: "Глава "
counter(heading) ". "; /* Виводиться текст перед вмістом тега
<H2> */
}
</style>
</head>
<body>
<h2>Теорія лову лева в
пустелі</h2>
<h2>Методи інверсної
кінематики</h2>
<h2>Лов лева чисельними
методами</h2>
</body>
</html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1.
Застосування властивості counter - increment
Примітка
Для елементів,
у яких встановлене display : none, значення лічильника не міняється.